<template>
  <div class="login">
    <div class="left">
      <img src="https://heimahr.itheima.net/static/img/login_back.5ecbf4ab.png" alt=""
        style="border-radius: 0px 50px 50px 0px;">
    </div>
    <div class="right">
      <div style="width: 350px;">
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
          class="demo-ruleForm" :size="formSize" status-icon>
          <div v-show="loginflag == true">
            <h2 style="margin: 50px 00px;">手机号登陆</h2>
            <el-form-item label="" prop="mobile">
              <el-input v-model="ruleForm.mobile" style="height: 38px;border: none;" />
            </el-form-item>
            <el-form-item label="" prop="password">
              <el-input v-model="ruleForm.password" type="password" show-password />
            </el-form-item>
            <el-form-item>
              <div>
                <el-checkbox v-model="checked1" label="用户平台使用协议" size="large" @change="flagtab" />
              </div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm(ruleFormRef)" style="width: 100%;background-color: #2752fb">
                登陆
              </el-button>
            </el-form-item>
          </div>
          <div v-show="loginflag == false">
            扫码登陆
          </div>
          <el-form-item>
            <div style="display: flex;justify-content: space-between;width: 100%;">
              <div style="width: 49%;">
                <el-button style="width: 100%;border-radius: 0px;" @click="loginflag = true">
                  手机号登陆
                </el-button>
              </div>
              <div style="width: 49%;">
                <el-button style="width: 100%;border-radius: 0px;" @click="loginflag = false">
                  扫码登陆
                </el-button>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router"
import { reactive, ref } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { userLogin } from '@/api/login'
interface RuleForm {
  mobile: string
  password: string

}
const router = useRouter()
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  mobile: '13800000002',
  password: 'hm#qd@23!',

})
let checked1 = ref<Boolean>(true)
let loginflag = ref<Boolean>(true)
const flagtab = (e: Boolean) => {
  checked1.value = e
}
const rules = reactive<FormRules<RuleForm>>({
  mobile: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { min: 1, max: 11, message: '请输入正确的手机号', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 1, max: 10, message: '请输入正确的密码', trigger: 'blur' },
  ]
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (checked1.value == true) {
        userLogin(ruleForm).then(res => {
          if (res.data.code == 10000) {
            localStorage.setItem('token', res.data.data)
            localStorage.setItem('User', JSON.stringify(res.data))
            console.log(res);
            location.href = '/index'
          }
          ElMessage({
            message: res.data.message,
            type: 'success',
          })
        })
      } else {
        ElMessage({
          message: '请勾选用户平台使用协议',
          type: 'warning',
        })
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}
</script>

<style scoped>
.login {
  width: 100vw;
  height: 100vh;
  display: flex;

  .left {

    height: 100vh;
    overflow: hidden;
  }

  .right {
    height: 100vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding-left: 200px;


  }
}


.text1 {
  color: red;
}
</style>
